<style rel="stylesheet/scss" lang="scss" scoped>
	.f-cation {
		flex: 1.5;
		display: flex;
		height: 70%;
		padding: 0 5px 0;
		margin: 0 5px;
		border: 1px solid #e5e5e5;
		flex-direction: column;
		margin-top: 10px;
		.f-cation_btn {
			width: 100%;
			height: 30px;
			color: #fff;
			display: flex;
			line-height: 30px;
			padding-left: 10px;
			cursor: pointer;
			background: #409EFF;
			span {
				flex: 1;
				text-align: center;
			}
		}
		.ta {
			flex: 1;
			width: 100%;
			height: 500px;
			overflow: auto;
		}
		.text-s {
			color: #409EFF;
			margin: 0 10px;
			cursor: pointer;
		}
		.text-red {
			cursor: pointer;
		}
		.box-flex {
			display: flex;
			align-items: center;
		}
		.sp-w-50 {
			width: 100px;
			line-height: 40px;
		}
		.text-not {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #666;
		}
	}
</style>
<template>
	<div class="f-cation">
		<!--<el-radio  label="TEXT" v-model="type">纯文本</el-radio>-->
		<p class="f-cation_btn text-14">
			<font @click="addCat">新增+</font>
			<span>二级品类属性</span>
		</p>
		<div class="ta">
			<template v-if="list && list.length>0">
				<el-table :data="list" stripe style="width: 100%">
					<el-table-column prop="property.propertyName" label="属性" align="center">
					</el-table-column>
					<el-table-column prop="property.groupName" label="所属组"  align="center">
					</el-table-column>
					<el-table-column prop="propertyType" label="所属类型" align="center">
						<template slot-scope="scope">
							{{scope.row.propertyType == 1 ? '文本': scope.row.propertyType == 2 ? '文本链接':scope.row.propertyType == 3 ? '纯图片':
							'图片链接'}}
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="顺序号" align="center" ></el-table-column>
					<el-table-column label="操作" align="center" width="150px">
						<template slot-scope="scope">
							<span class="text-s" @click.stop.prevent="editFn(scope.row)">编辑</span>
							<span class="text-red" @click.stop.prevent="deleteFn(scope.row)">删除</span>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<div v-else class="text-not">暂无数据</div>
		</div>
		<el-dialog :title="title" :visible.sync="centerDialogVisible" width="45%" center>
			<el-row class="p-all-20 ">
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">属性名称:</span>
					<template>
						<el-select v-model="propertyName" placeholder="请选择">
							<el-option v-for="item in selectList" :key="item.showName" :label="item.showName" :value="item.showName">
							</el-option>
						</el-select>
					</template>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 ">属性类型:</span>
					<el-radio label="1" v-model="type">纯文本</el-radio>
					<el-radio label="2" v-model="type">文本链接</el-radio>
					<el-radio label="3" v-model="type">纯图片</el-radio>
					<el-radio label="4" v-model="type">图片链接</el-radio>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">所属组名:</span>
					<el-input placeholder="所属组名" v-model="groupName" maxLength="20"  readonly="readonly"/>
				</el-col>
				<el-col :span="20" class="box-flex m-b-10">
					<span class="sp-w-50 m-r-10">顺序号:</span>
					<el-input v-model="num" type="number" placeholder="顺序号" maxLength="5" oninput="if(value.length>5)value=value.slice(0,5)"
					/>
				</el-col>

			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdmin">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>
<script>
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	export default {
		props: {
			leveThirdList: {
				type: Array,
				default: []
			},
			secondId: {
				type: [String,Number],
				default: ''
			}
		},
		data() {
			return {
				propertyName: '',
				type: '1',
				id: '',
				title: '新增属性',
				groupName: '',
				num: '',
				list: [],
				propertyId:'',
				selectList: [],
				centerDialogVisible: false
			}
		},
		created() {
			this.initHead()
			this.list = this.leveThirdList
		},
		methods: {
			// 获取属性名称
			
			initHead() {
				this.$get({
					url: 'model/property/show/',
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.selectList = res.data
						} else{
							this.$message({
								type: 'error',
								message: res.msg
							})
						}
					}
				})
// 				this.$ajax({
// 					api: 'modelhead'
// 				}).then(res => {
// 					if (res.status === 200) {
// 						this.selectList = res.data
// 						console.log(this.selectList)
// 					}
// 				}).catch(err => {
// 					this.$message({
// 						type: 'error',
// 						message: err.message
// 					})
// 				})
			},
			/**
			 * @param item 当前点击对象
			 */
			editFn(item) {
				console.log(item)
				this.id = item.id
				this.title = '编辑属性'
				this.propertyName = item.property.propertyName
				this.groupName = item.property.groupName 
				this.num = item.sort
				this.type = item.propertyType +''
				this.centerDialogVisible = true
				console.log(this.selectList)
				this.propertyId = item.property.id
				console.log(this.propertyId)
			},
			addCat() {
				this.title = '新增属性'
				this.centerDialogVisible = true
				this.type = '1'
				this.id = this.propertyName = this.groupName = this.num = ''
			},
			setAdmin() {
				this.$post({
					url: 'category/property/',
					data:{
						id: this.id,
						sort: this.num,
						propertyType : parseInt(this.type),
						categoryId: this.secondId,
						propertyId : this.propertyId, 
						groupName: this.groupName,
						propertyName: this.propertyName
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$emit('handleFridLeave')
							this.$message({
								type: 'success',
								message: '操作成功'
							})
							this.centerDialogVisible = false
						} else {
							this.$message({
								type: 'error',
								message: '已存在此属性'
							})
						}
					}
				})
				
			},
			editAdmin(){
				this.$put({
					url: 'category/property/',
					data:{
						id: this.id,
						sort: parseInt(this.num),
						propertyType : parseInt(this.type),
						propertyId : this.propertyId, 
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$emit('handleFridLeave')
							this.$message({
								type: 'success',
								message: '编辑成功'
							})
							this.centerDialogVisible = false
						} else {
							this.$message({
								type: 'error',
								message: '已存在此属性'
							})
						}
					}
				})
			},
			saveAdmin() {
				let attr = !this.propertyName ? '请填写属性名称' : !this.type ? '请选择属性类型' : !this.groupName ? '请填写属性组' : !this.num ?
					'请填写顺序号' : ''
				if (attr) {
					this.$message({
						type: 'error',
						message: attr
					})
					return
				}
				this.id ? this.editAdmin() : this.setAdmin()
				
				
			},
			deleteFn(item) {
				this.$confirm("删除二级品类?", "确定删除此属性", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$delete({
						url: `category/property/${item.id}`,
						callback: res => {
							if(res.status === 200) {
								this.$emit('handleFridLeave')
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else{
								this.$message({
									type: 'error',
									message: '删除失败'
								})
							}
						}
					})
//					this.$ajax({
//						api: 'attr/delete',
//						params: {
//							id: item.id
//						}
//					}).then(res => {
//						if (res.status === SUCCESS_REQUEST_STATUS) {
//							this.$emit('handleFridLeave')
//							this.$message({
//								type: 'success',
//								message: '删除成功'
//							})
//						}
//					}).catch(err => {
//						this.$message({
//							type: 'error',
//							message: err.message
//						})
//					})
				})
			}
		},

		watch: {
			leveThirdList(val) {
				this.list = val
			},
			propertyName(val, oldVal) {
				if(val) {
					this.groupName = this.selectList.filter((item) => {return  val == item.showName})[0].groupName
					this.propertyId = this.selectList.filter((item) => {return  val == item.showName})[0].id
				}
			}
		}
	}
</script>
